<template>
  <div class="list-common-table">
    <t-row justify="space-between">
      <t-button v-permission="authority.SYS_ORG_ADD" @click="add">
        <template #icon><add-icon /></template>
        新建
      </t-button>
    </t-row>

    <div class="table-container">
      <t-enhanced-table
        :data="renderData"
        :columns="columns"
        row-key="id"
        :hover="true"
        :loading="loading"
        :header-affixed-top="headerAffixedTop"
        table-layout="auto"
        size="small"
        :tree="{ defaultExpandAll: true }"
      >
        <template #operations="{ row }">
          <t-space>
            <t-button
              v-permission="authority.SYS_ORG_EDIT"
              variant="text"
              size="small"
              theme="primary"
              @click="edit(row)"
            >
              <template #icon>
                <edit-icon />
              </template>
              编辑
            </t-button>
            <t-popconfirm
              :content="`此操作将永久删除该机构(${row.name}), 是否继续?`"
              theme="danger"
              @confirm="del(row.id)"
            >
              <t-button v-permission="authority.SYS_ORG_DEL" variant="text" size="small" theme="danger">
                <template #icon>
                  <delete-icon />
                </template>
                删除
              </t-button>
            </t-popconfirm>
          </t-space>
        </template>
      </t-enhanced-table>
    </div>
    <org-form v-model:visible="formDialogVisible" :form-data="formData" @refresh="refresh" />
  </div>
</template>
<script setup lang="ts">
import { AddIcon, DeleteIcon, EditIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { computed, ref } from 'vue';
import { useRequest } from 'vue-request';

import { deleteOrg, getOrgTree } from '@/api/upms/org';
import { prefix } from '@/config/global';
import { ORG_TYPES } from '@/constants';
import { useSettingStore } from '@/store';
import authority from '@/utils/authority';

import OrgForm from './components/org-form.vue';

const { data, loading, refresh } = useRequest(getOrgTree);

const store = useSettingStore();

const formData = ref({});

// 弹出框标记
const formDialogVisible = ref(false);

const columns = [
  { title: '机构名称', colKey: 'name' },
  { title: '机构编码', colKey: 'code' },
  {
    title: '机构类型',
    colKey: 'type',
    cell: (h: any, { row }: { row: any }) => {
      return ORG_TYPES.find((scope: { value: any }) => scope.value === row.type)?.label;
    },
  },
  { title: '电话', colKey: 'phone' },
  { title: '邮箱', colKey: 'email' },
  { title: '地址', colKey: 'address' },
  { title: '备注', colKey: 'remarks' },
  { title: '操作', colKey: 'operations' },
];

const renderData = computed(() => data.value || []);

const add = () => {
  formDialogVisible.value = true;
  formData.value = {};
};
const edit = (e: any) => {
  formDialogVisible.value = true;
  formData.value = { ...e };
};
const del = async (id: string) => {
  await deleteOrg(id).then(() => {
    MessagePlugin.success('删除成功');
    refresh();
  });
};

const headerAffixedTop = computed(
  () =>
    ({
      offsetTop: store.isUseTabsRouter ? 48 : 0,
      container: `.${prefix}-layout`,
    }) as any, // TO BE FIXED
);
</script>

<style lang="less" scoped>
.list-common-table {
  background-color: var(--td-bg-color-container);
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
  border-radius: var(--td-radius-medium);

  .table-container {
    margin-top: var(--td-comp-margin-xxl);
  }
}

.form-item-content {
  width: 100%;
}

.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .expand {
    .t-button__text {
      display: flex;
      align-items: center;
    }
  }
}

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: var(--td-comp-margin-s);
  }
}
</style>
